<template>
	<uni-popup ref="uniPopup" type="bottom">
		<view class="flex f-column auth-box">
			<text class="font40">登录/注册</text>
			<text v-if="step == 1" class="font24 gray666 mt20">智能洗衣使用您的微信进行登录，需要获取您的昵称、头像等信息以便为您创建账号</text>
			<text v-else class="font24 gray666 mt20">智能洗衣需要获取您绑定的手机号</text>
			<view class="flex f-justifyB mt50">
				<view class="refuse-btn font28 gray777 f-center" @click="close">拒绝</view>
				<view v-if="step == 1" class="agree-btn font28 white f-center" @click="getUserInfo">授权登录</view>
				<button v-else class="agree-btn font28 white f-center phone-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号</button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import { mapMutations } from 'vuex'
	export default {
		name: "auth",
		data() {
			return {
				code: '',
				step: 1,
				openId: '',
				sessionKey: '',
				info: {}
			};
		},
		methods: {
			...mapMutations(['login']),
			getPersonInfo() {
				this.$http.ajax({
					url: '/User/wxSelect',
					params: {
						openId: uni.getStorageSync('openId')
					},
					isOP: 0
				}).then((res) => {
					if (res.code == 0) {
						uni.setStorageSync('userInfo', res.data[0])
						this.login(res.data[0])
						this.$emit('getList')
					}
				})
			},
			userRegister() {
				let _this = this
				_this.$http.ajax({
					url: '/User/add',
					params: {
						'userName': _this.info.nickName,
						'userPhone': uni.getStorageSync('phone'),
						'openId': uni.getStorageSync('openId'),
						'userHeadPortrait': _this.info.avatarUrl
					},
					isOP: 0
				}).then((res) => {
					_this.getPersonInfo()
					setTimeout(() => {
						_this.close()
					}, 300)
				})
			},
			getPhoneNumber(e) {
				let _this = this
				_this.$http.ajax({
					url: '/User/getPhoneNumber',
					params: {
						session_key: _this.sessionKey,
						encryptedData: e.detail.encryptedData ? e.detail.encryptedData : '',
						iv: e.detail.iv ? e.detail.iv : '',
						openId: _this.openId
					},
					isOP: 0
				}).then((res) => {
					if (res.code == 200) {
						_this.$api.msg('授权成功')
						uni.setStorageSync('phone', res.phoneNumber)
						_this.userRegister()
					} else {
						_this.$api.msg(res.msg)
						uni.removeStorageSync('openId')
						uni.removeStorageSync('sessionKey')
						uni.removeStorageSync('merchantId')
						setTimeout(() => {
							_this.close()
						}, 300)
					}
				})
			},
			getUserInfo() {
				let _this = this
				uni.getUserProfile({
					desc: 'Wexin', // 这个参数是必须的
					success: info => {
						_this.info = info.userInfo
						_this.$http.ajax({
							url: '/User/wxlogin',
							params: {
								code: _this.code,
								gzbh: getApp().globalData.gzbh,
								appId: uni.getAccountInfoSync().miniProgram.appId
							}
						}).then((res) => {
							if (res.code == 200) {
								_this.step = 2
								_this.sessionKey = res.session_key
								_this.openId = res.openid
								uni.setStorageSync('openId', res.openid)
								uni.setStorageSync('sessionKey', res.session_key)
								uni.setStorageSync('merchantId', res.merchantId)
								uni.setStorageSync('type', res.type)
							} else {
								_this.$api.msg(res.msg)
							}
						})
					},
					fail: err => {
						_this.$api.msg('授权失败')
						setTimeout(() => {
							_this.close()
						}, 300)
					}
				})
			},
			open() {
				this.$refs.uniPopup.open()
				var _this = this
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						_this.code = loginRes.code
					}
				})
			},
			close() {
				this.$refs.uniPopup.close()
			}
		}
	}
</script>

<style scoped lang="scss">
	.auth-box {
		width: 750rpx;
		border-radius: 60rpx 60rpx 0rpx 0rpx;
		background-color: #FFFFFF;
		padding: 44rpx 50rpx 50rpx;

		.refuse-btn {
			width: 250rpx;
			height: 70rpx;
			background: #EDEDED;
			border: 2rpx solid #C4C4C4;
			border-radius: 36rpx;
		}

		.agree-btn {
			width: 250rpx;
			height: 70rpx;
			background: #5D95FF;
			border-radius: 36rpx;
		}

		.phone-btn {
			margin: 0;

		}
	}
</style>
